<template>
    <div class="gs-py">
        <div class="gs-py-header">
            <el-row>
                <el-col :offset="20" :span="2" class="grid-cell">
                    <el-button type="danger" @click="cancel">取消申请</el-button>
                </el-col>
                <el-col :span="2" class="grid-cell">
                    <el-button type="primary" @click="submit">提交申请</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="gs-py-form">
            <el-row class="gs-py-title">
                <el-col :span="24">物品申请</el-col>
            </el-row>
            <el-divider/>
            <el-container>
                <el-aside width="700px">
                    <gs-choice-box @choice-gs="choiceGsClick" ref="gsChoiceBoxRef"/>
                </el-aside>
                <el-main>
                    <el-form label-position="left" label-width="100px" label-suffix="：" :model="formData" :rules="rules" ref="gsPyFormRef">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="申请人员" prop="empId">
                                    <el-select v-model="formData.empId" class="full-width-input" clearable filterable
                                               automatic-dropdown placeholder="选择申请员工">
                                        <el-option v-for="(item, index) in empNameOptions" :key="index"
                                                   :label="item.label" :value="item.value"
                                                   :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <el-form-item label="申请部门" prop="deptId">
                                    <el-select v-model="formData.deptId" class="full-width-input" clearable filterable
                                               automatic-dropdown placeholder="选择申请部门">
                                        <el-option v-for="(item, index) in deptNameOptions" :key="index"
                                                   :label="item.label" :value="item.value"
                                                   :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="申请物品表格" label-width="120px">
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div class="table-container">
                                    <el-table :data="gsData" :header-cell-style="{textAlign: 'center'}"
                                              :cell-style="{ textAlign: 'center' }"
                                              size="small"
                                              border
                                    >
                                        <el-table-column prop="name" label="物品名称"/>
                                        <el-table-column prop="code" label="物品编号"/>
                                        <el-table-column prop="spec" label="物品规格"/>
                                        <el-table-column prop="num" label="物品数量">
                                            <template #default="s">
                                                <el-input-number v-model="s.row.num" :min="1" :max="s.row.maxNum" size="small" controls-position="right"/>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template #default="scope">
                                                <el-button size="small" type="danger"
                                                    @click="handleDelete(scope.$index, scope.row)"
                                                >删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 20px">
                            <el-col :span="24">
                                <el-form-item label="申请原因" prop="cause">
                                    <el-input type="textarea" :rows="1" v-model="formData.cause"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remark">
                                    <el-input type="textarea" :rows="2" v-model="formData.remark"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-main>
            </el-container>
        </div>
    </div>
</template>


<script>
import {defineComponent, toRefs, reactive, getCurrentInstance} from 'vue'
import {Search} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {goodsAll, selectEmp, createGsPy} from "../../../../../network/adm/office";
import {getDeptOptions} from "../../../../../network/sys/dept";
import GsChoiceBox from "../comps/GsChoiceBox2.vue";

export default defineComponent({
    data() {
        return {
            gsData: [],//用户选择的物品集合
        }
    },
    methods: {
        //获取员工姓名
        selectE() {
            selectEmp().then(data => {
                this.empNameOptions = data.data
            })
        },
        //获取部门名称
        selectD() {
            getDeptOptions(1).then(data => {
                this.deptNameOptions = data.data;
            })
        },
        choiceGsClick(row) {
            // console.log('row',row);
            // console.log('this.gsData',this.gsData);
            for (let i = 0; i < this.gsData.length; i++) {
                if(row.id===this.gsData[i].id){
                    ElMessage.warning('选项栏中已有该商品！');
                    return;
                }
            }
            let gs = {
                id: row.id,
                name: row.name,
                code: row.code,
                gsTypeId: row.gsTypeId,
                spec: row.spec,
                num: null,
                maxNum: row.num
            }
            this.gsData.push(gs);
        },
        cancel() {
            this.$operate.confirm({
                hint: '你确定要取消申请吗？',
                title: '取消申请',
                executeFn: () => {
                    this.$router.push('/adm/gs/gs-py')
                }
            })
        },
        submit() {
            if(this.gsData.length===0){
                ElMessage.warning('当前未选择任何物品!');
                return;
            }
            this.$refs.gsPyFormRef.validate((valid)=>{
                if(valid){
                    let gsPyDetailList = [];
                    this.gsData.forEach(e=>{
                        let gs ={
                            gsName: e.name,
                            gsId: e.id,
                            spec: e.spec,
                            num: e.num
                        }
                        gsPyDetailList.push(gs);
                    })
                    let gsPy = {
                        empId: this.formData.empId,
                        deptId: this.formData.deptId,
                        cause: this.formData.cause,
                        remark: this.formData.remark,
                      gsPyDetailList: gsPyDetailList
                    }
                    createGsPy(gsPy).then(vo => {
                        this.$response.handle({
                            data: vo,
                            success: '添加申请成功',
                            successFn: ()=>{
                                // this.$router.push("/amd/gs/gs-py")


                            },
                            log: '申请结果'
                        })
                    })
                }else{
                    ElMessage.error('请先完善表单项!')
                }
            })
        },
        //删除操作
        handleDelete(index) {
            this.gsData.splice(index, 1);
            // //给一个成功的消息提示
            // ElMessage({
            //     showClose: true,
            //     message: '该条信息删除成功',
            //     type: 'success',
            // })
            // this.$confirm('你确定要删除该条信息么？', '温馨提示', {
            //     confirmButtonText: '删除',//确认按钮，默认值是ok
            //     cancelButtonText: '再想想',//取消按钮，默认值是cancel
            //     type: 'warning'
            // }).then(() => {//点击确定就会执行then函数
            //     this.gsData.splice(index, 1);
            //     //给一个成功的消息提示
            //     ElMessage({
            //         showClose: true,
            //         message: '该条信息删除成功',
            //         type: 'success',
            //     })
            // }).catch(() => {//点击取消就会执行catch函数
            // })
        },
    },
    created() {
        this.selectE();
        this.selectD();
    },
    components: {GsChoiceBox},
    setup() {
        const state = reactive({
            formData: {
                empId: null,
                deptId: null,
                num: null,
                cause: null,
                remark: null,
                gsPyDetailList: []
            },
            rules: {
                empId: [{required: true, message: '请选择申请人', trigger: 'change'}],
                deptId: [{required: true, message: '请选择申请部门',trigger: 'change'}],
            },
            empNameOptions: [{
                "label": "select 1",
                "value": 1
            }],
            deptNameOptions: [{
                "label": "select 1",
                "value": 1
            }],
        })
        return {
            ...toRefs(state),
            Search
        }
    },
})

</script>

<style scoped>
* {
    /*border: 1px solid red;*/
}

.el-main {
    border: 1px solid lightgray;
    border-left: none;
}

.el-aside {
    border: 1px solid lightgray;
}

.gs-py-form {
    background: white;
    margin: 0 auto;
    width: 1400px;
    padding: 10px 20px;
    min-height: 600px;
}

.el-input-number{
    width: 100px;
}

.gs-py-title {
    color: #4b4949;
    font-size: 28px;
    font-family: "Agency FB";
}

.gs-py-title .el-col {
    text-align: center;
    letter-spacing: 10px;
}

.gs-py-header {
    background: white;
    margin-bottom: 20px;
    padding: 8px 0;
}

.gs-py-header > .el-row {
    width: 1240px;
    margin: 0 auto;
}
</style>

<style>
body {
    background: rgb(248, 249, 250);
}
.el-select-dropdown__item {
    width: 100%;
}

.el-select-dropdown {
    width: 120px;
}
</style>
